<template>
    <div class="details" v-if="detailsObj">
        <div class="detailTop">
            <van-nav-bar :title="title" left-text="返回" left-arrow @click-left="pathGo" />
        </div>
        <div v-show="!flat" class="detailMain">
            <div class="detailMainImg" v-if="detailsObj.horizontal_cover">
                <img :src="detailsObj.horizontal_cover" alt="" />
                <div class="detailDesc">
                    <div class="detailTitle">{{ title }}</div>
                    <div class="detailOther">{{ authorName }}</div>
                </div>
            </div>
            <detailsComItem v-if="detailsObj.horizontal_cover" :detailsObj="detailsObj" :locnum="num" :key="detailsObj.id"></detailsComItem>
            <guess-like v-if="detailsObj.horizontal_cover" @sendJPT="foo"></guess-like>
        </div>
        <loading v-show="flat"></loading>
    </div>
</template>

<script>
import detailsComItem from "@/components/detailsComItem.vue";
import { comicDetail } from "../../request";
import guessLike from "@/components/guessLike.vue";
import loading from "@/components/loading.vue";
export default {
    name: "detailsR",
    components: {
        detailsComItem,
        guessLike,
        loading,
    },
    data() {
        return {
            title: "",
            detailsObj: {},
            num: 0,
            username: "游客",
            flat: true,
        };
    },

    computed: {
        authorName() {
            let str = "";
            if (this.detailsObj["author_name"]) {
                for (let i = 0; i < this.detailsObj["author_name"].length; i++) {
                    str += this.detailsObj["author_name"][i] + "、";
                }
            }
            str = str.substring(0, str.length - 1);
            if (this.detailsObj["styles"]) {
                if (this.detailsObj["styles"][0] == undefined) {
                    this.detailsObj["styles"][0] = "--";
                }
                str += " · " + this.detailsObj["styles"][0] + " · MC" + this.detailsObj["id"];
            }
            return str;
        },
    },
    methods: {
        pathGo() {
            this.$router.go(-1);
        },
        getComicDetail() {
            let index = this.$route.query.id;
            comicDetail({ comic_id: index })
                .then((data) => {
                    this.detailsObj = data.data;
                    this.title = data.data.title;
                })
                .then(() => {
                    this.flat = false;
                });
        },
        foo(params) {
            this.$router.replace({ path: params.path, query: params.query });
            this.getComicDetail();
        },
    },

    created() {
        this.getComicDetail();
    },
    updated() {
        if (localStorage.getItem("record")) {
            let localNum = JSON.parse(localStorage.getItem("record"));
            if (localStorage.getItem("loginUser")) {
                this.username = JSON.parse(localStorage.getItem("loginUser")).username;
            }
            let iIndex = localNum.find((item) => {
                return item["uid"] == this.detailsObj.id && item["yyid"] == this.username;
            });
            if (iIndex) {
                this.num = iIndex["num"];
            } else {
                this.num = 0;
            }
        }
    },
};
</script>

<style lang="scss">
@import url(../../static/style/reset.css);
@import "../../static/style/variable.scss";

.van-nav-bar .van-icon,
.van-nav-bar__text {
    color: $activeColor;
}
.detailMain {
    height: auto;
    .detailMainImg {
        position: relative;
        .detailDesc {
            position: absolute;
            height: 0.2667rem;
            width: 100%;
            padding: 0 0.32rem;
            height: 1.2533rem;
            box-sizing: border-box;
            bottom: 0.2667rem;
            .detailTitle {
                font-size: 0.5333rem;
                color: white;
                padding-bottom: 0.2133rem;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
            }
            .detailOther {
                color: white;

                font-size: 0.32rem;
            }
        }
        img {
            width: 100%;
        }
    }
}
</style>
